<template>
  <div class="upload-container">
    <el-upload
        :action="uploadUrl"
        :headers="headers"
        :multiple="false"
        :limit="1"
        :accept="accept"
        :show-file-list="false"
        :before-upload="beforeUpload"
        @success="handleSuccess"
        @error="handleError"
    >
      <div class="bg-[#F5F5F5] rounded-[6px] px-2 py-1 mr-2 flex items-center cursor-pointer">
        <img v-if="uploadType === 'image'" class="mr-1" src="@/assets/images/image-1-line.png" alt="">
        <img v-else  class="mr-1" src="@/assets/images/movie-line.png" alt="">
        {{ uploadType === 'image' ? '图片' : '视频' }}
      </div>
    </el-upload>
    <div class="file-list" v-if="fileList.length > 0">
      <h3>{{ uploadType === 'image' ? '图片列表' : '视频列表' }}</h3>
      <ul>
        <li v-for="(file, index) in fileList" :key="index">
          <span>{{ file.name }}</span>
          <el-button type="danger" size="small" @click="removeFile(index)">删除</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, ref, toRefs} from 'vue';
import { ElUpload, ElButton, ElIcon, ElMessage } from 'element-plus';

// 接收父组件传递的上传类型和上传地址
const props = defineProps({
  uploadType: {
    type: String,
    default: 'image',
    validator: (value) => ['image', 'video'].includes(value),
  },
  uploadUrl: {
    type: String,
    required: true,
  },
});
// 定义文件列表
const fileList = ref([]);

// 定义请求头
const headers = {
  // 可以根据需要添加请求头
};

// 定义允许的图片和视频格式
const ALLOWED_IMAGE_FORMATS = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
const ALLOWED_VIDEO_FORMATS = ['video/mp4', 'video/avi', 'video/mov', 'video/mkv', 'video/flv', 'video/wmv'];
const { uploadType } = toRefs(props)
const accept = computed(() => {
  if (uploadType.value === 'image') {
    return ALLOWED_IMAGE_FORMATS.join(',')
  }else if (uploadType.value === 'video') {
    return ALLOWED_VIDEO_FORMATS.join(',')
  }
})

// 上传前校验文件类型
const beforeUpload = (file) => {
  let allowedFormats = [];
  if (props.uploadType === 'image') {
    allowedFormats = ALLOWED_IMAGE_FORMATS;
  } else if (props.uploadType === 'video') {
    allowedFormats = ALLOWED_VIDEO_FORMATS;
  }

  if (!allowedFormats.includes(file.type)) {
    const formatStr = props.uploadType === 'image' ? ALLOWED_IMAGE_FORMATS.join(', ') : ALLOWED_VIDEO_FORMATS.join(', ');
    ElMessage.error(`仅支持以下 ${props.uploadType} 格式：${formatStr}`);
    return false;
  }

  return true;
};

// 处理上传成功事件
const handleSuccess = (response, file) => {
  fileList.value.push(file);
  ElMessage.success('上传成功');
};

// 处理上传失败事件
const handleError = () => {
  ElMessage.error('上传失败');
};

// 删除文件
const removeFile = (index) => {
  fileList.value.splice(index, 1);
};

// 模拟点击上传按钮触发文件选择
const onUploadButtonClick = () => {
  const uploadInput = document.querySelector('.el-upload input[type="file"]');
  if (uploadInput) {
    uploadInput.click();
  }
};
</script>

<style scoped>
.custom-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  border-radius: 4px;
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.custom-upload-button el-icon {
  margin-right: 8px;
}

.file-list {
  margin-top: 20px;
}

.file-list ul {
  list-style-type: none;
  padding: 0;
}

.file-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.file-list li span {
  margin-right: 10px;
}
</style>